<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="/static/css/app/workspace/changeNotes.css">
    <script src="/static/js/app/workspace/flexible.js"></script>
    <script src="/static/js/app/workspace/jquery.min.js"></script>
    <script src="/static/js/app/workspace/init.js"></script>
    <script src="/static/js/app/workspace/util.js"></script>
    <title>兑换花瓣</title>
    <style>
        iframe:not(.huakai_iframe) {display:none !important;}
        html,body{-webkit-text-size-adjust: 100%;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
        .hide{display: none}
        .message{position: fixed;top:60%;width: 100%;height: 1rem;text-align: center;}
        .message>span{width: 6rem;color: #fff;text-align: center;line-height: 0.5rem;border-radius: 0.04rem;background: rgba(0,0,0,0.4);
            font-size: 0.3rem;display: inline-block;margin: 0 auto;padding:0 0.5rem;}
         .popup {
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.4);
            position: absolute;
            top: 0;
            left: 0;
        }
         .popup .reminder {
            width: 6.66666667rem;
            height: 4rem;
            border-radius: 0.10666667rem;
            background: #fff;
            position: absolute;
            left: 50%;
            margin-left: -3.33333333rem;
            top: 45%;
            margin-top: -2rem;
        }
         .popup .reminder h1 {
            font-weight: normal;
            color: #333;
            font-size: 0.48rem;
            text-align: center;
            width: 100%;
            line-height: 1.33333333rem;
        }
         .popup .reminder p {
             padding: 0 0.2rem;
            line-height: 0.46666667rem;
            text-align: center;
            color: #333;
            font-size: 0.35rem;
            margin: 0 auto;
        }
         .popup .reminder .popup-btn {
            width: 100%;
            height: 1.33333333rem;
            border-top: 0.01333333rem solid #e3e3e3;
            position: absolute;
            bottom: 0;
        }
         .popup .reminder .popup-btn span {
            font-size: 0.48rem;
            float: left;
            line-height: 1.33333333rem;
            text-align: center;
            width: 49.5%;
            border-right: 0.01333333rem solid #e3e3e3;
            color: #333;
        }
         .popup .reminder .popup-btn span.sure {
            border-right: 0;
             color: #f05c5c;
        }
    </style>
</head>
<body>
<script src="/static/js/common/Monitor.js"></script>
    <div class="note-con">
        <div class="note-main">
            <div class="main-tit">
                <h1 id="noteCount">99999</h1>
                <p>小纸条数量</p>
            </div>
            <ul class="main-con">
                <li data-count="3000">
                    <h1>3000花瓣</h1>
                    <p>消耗3000小纸条</p>
                </li>
                <li data-count="5000">
                    <h1>5000花瓣</h1>
                    <p>消耗5000小纸条</p>
                </li>
                <li data-count="8000">
                    <h1>8000花瓣</h1>
                    <p>消耗8000小纸条</p>
                </li>
                <li data-count="10000">
                    <h1>10000花瓣</h1>
                    <p>消耗10000小纸条</p>
                </li>
            </ul>
        </div>
        <div class="note-ruler">
            <h1>兑换规则:</h1>
            <div class="contain">

            </div>
        </div>
    </div>
    <div class="message hide" id="message"><span></span></div>
    <div class="popup hide">
        <div class="reminder hide">
            <h1 style="opacity: 0">温馨提示</h1>
            <p id="text"></p>
            <div class="popup-btn">
                <span class="cancel">否</span>
                <span class="sure" id="sure2">是</span>
            </div>
        </div>
    </div>
    <script>
        var accessId = getParameter("x-access-id");
        var accessToken = getParameter("x-access-token");
        var ua = "h5";
        $(function () {
             // 兑换小纸条规则
             exchangenoteRuler();
             var noteCount=parseInt($("#noteCount").html());
             $(".main-con").find("li").click(function () {
                 var count=parseInt($(this).attr("data-count"));
                //   兑换小纸条
                 if(noteCount<count){
                     $("#message span").html("小纸条不足");
                     $("#message").removeClass("hide");
                     setTimeout(function () {
                         $("#message").addClass("hide");
                     },2000);
                 }else{
                    $(".popup,.reminder").removeClass("hide");
                    $("#text").html("是否消耗"+count+"小纸条兑换"+count+"花瓣")
                     $("#sure2").attr("data-count",count)
                 }
             })
            $(".cancel").click(function () {
                $(".popup,.reminder").addClass("hide")
            })
            $("#sure2").click(function () {
                var count=$("#sure2").attr("data-count");
                var params={};
                $.extend(params, {
                    "exchangeBal":count, //更新
                    "spendNoteNum":count,//有效
                });
                $(".popup,.reminder").addClass("hide");
               exchangenote(params)
            })
        })
        function exchangenoteRuler() {
            $.ajax({
                url:genUrl("/noteExchange/exchangeHome"),
                type: "GET",
                contentType:"application/json",
                dataType:'json',
                async:false,
                headers:{
                    "x-access-id": accessId,
                    "x-access-token": accessToken,
                    "x-ua": ua
                },
                success: function (res) {
                    if(res.code !== 0){
                        alert(res.message);
                        return
                    }
                    var noteNum=res.data.noteNum;
                    var noteExchangeRule=res.data.noteExchangeRule;
                    $("#noteCount").html(noteNum);
                    var str="";
                    if(noteExchangeRule && noteExchangeRule.length>0){
                        for(var i=0;i<noteExchangeRule.length;i++){
                            str+="<p>"+noteExchangeRule[i]+"</p>"
                        }
                    }
                    $(".contain").html(str);
                }
            });
        }

        function exchangenote(params) {
            $.ajax({
                url: genUrl("/noteExchange/exchange"),
                type: 'POST',
                data: JSON.stringify(params),
                contentType: "application/json",
                async: true,
                headers:{
                    "x-access-id": accessId,
                    "x-access-token": accessToken,
                    "x-ua": ua
                },
                success: function (res) {
                    if(res.code !== 0){
                        $("#message span").html(res.message);
                        $("#message").removeClass("hide");
                        setTimeout(function () {
                            $("#message").addClass("hide");
                        },2000);
                        return
                    }
                    $("#message span").html("兑换成功,等待审核");
                    $("#message").removeClass("hide");
                    setTimeout(function () {
                        $("#message").addClass("hide");
                    },2000);
                    exchangenoteRuler();
                }
            });
        }
    </script>
</body>
</html>